<template>
  <view class="serchCom">
    <view class="flex u-p-20">
      <u-input v-model="searchData.customerName" placeholder="请选择煤矿" type="select" :select-open="mineShow"
        @click="mineShow = true" class="mine-input u-p-l-30" />
    </view>
    <!-- 煤矿企业 -->
    <u-popup mode="bottom" v-model="mineShow">
      <view class="popup-content">
        <view class="u-flex u-row-between u-p-b-30">
          <u-button :hair-line="false" :custom-style="customStyle" throttle-time="500"
            @click="cancelCustomer()">取消</u-button>
          <u-button :hair-line="false" :custom-style="submitStyle" throttle-time="500"
            @click="clickCustomer()">确定</u-button>
        </view>
        <view class="u-p-b-20">
          <u-search placeholder="请选择企业名称" v-model="filterCustomerVal" shape="square" bg-color="#E5EAE8" height="80"
            :show-action="true" :animation="true" :input-style="{ marginLeft: '20rpx' }" :search-icon="searchSrc"
            placeholder-color="#999999" :action-style="{
              color: '#288CFE',
              fontSize: '14px',
              fontWeight: '400'
            }"></u-search>
        </view>
        <scroll-view scroll-y="true" style="height: 600rpx">
          <view class="w-100p checkbox">
            <u-radio-group active-color="#288CFE" width="100%" v-model="radioValue">
              <u-radio @change="checkboxCustomerChange" v-for="(item, index) in filterCustomerList" :key="index"
                :name="item.label">
                {{ item.label }}
              </u-radio>
            </u-radio-group>
            <template v-if="filterCustomerList.length === 0">
              <view class="c-empty p-absolute-center">
                <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  props: {
    customerStr: {
      type: String,
    },
    countyStr: {
      type: String,
    },
    countyNo: {
      type: String,
    },
    isQuert: {
      type: Boolean,
      default: false
    },
    swiperChange: {// 用于统计板块tab切换判断
      type: Number,
    }
  },
  data () {
    return {
      searchData: {
        // customerStr: '所有煤矿',
        customerCode: '', //企业编码
        customerName: '', //企业名称
        customerNo: '',// //企业编码
        countyNo: '',//d
        countyStr: '所有区县'
      },
      isCity: true,
      isMine: false,
      countyShow: false,
      mineShow: false,
      countyList: [],
      mineList: [],
      swiperCurrent: 0,
      current: 0,

      // 按钮样式
      searchSrc: require('@/static/image/search.png'),
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#333333',
        background: '#F1F5F3',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      submitStyle: {
        color: '#fff',
        background: '#288CFE',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      radioValue: '',
      filterCustomerVal: '', //企业名称搜索数据
      arr: [],
      arrTwo: [],
    }
  },
  watch: {
    "swiperChange" (val) {// tab切换清空
      if (val) {
        this.mineShow = false
        this.countyShow = false
      }
    }
  },
  mounted () {
    if (getApp().globalData.userInfoData.superviseLevel !== '40') {
      this.isCity = false
    }
    this.getMineList()
    this.getCountyList()
  },
  computed: {
    filterCustomerList () {
      return this.mineList.filter(item => {
        return this.filterCustomerVal
          ? item.label?.indexOf(this.filterCustomerVal) >= 0 || item.pinyinCode?.indexOf(this.filterCustomerVal.toUpperCase()) >= 0
          : true
      })
    },
  },
  methods: {
    // 获取煤矿列表
    async getMineList () {
      let url = '/common/customer/getCustomerList'
      if (this.customerStr) {
        this.searchData.customerName = this.customerStr
      }
      if (this.countyStr) {
        this.searchData.countyStr = this.countyStr
      }
      const { body } = await this.$get(`${url}`)
      if (body) {
        body.unshift({
          id: '',
          label: '所有煤矿'
        })
        this.mineList = body
      }

    },
    // 获取区县
    async getCountyList () {
      const { body } = await this.$get('/alarm/common/getCountys')
      if (body) {
        body.unshift({
          id: '',
          label: '所有区县'
        })
        this.countyList = body
      }

    },

    // 选中某个煤矿时，由radio触发
    checkboxCustomerChange (e) {
      if (e) {
        this.radioValue = e
        this.arr = [e]
        for (let i = 0; i < this.mineList.length; i++) {
          if (this.mineList[i].label === e) {
            this.arrTwo = [this.mineList[i].id]
          }
        }
      }
      this.customerCode = this.arrTwo.toString()
      this.customerName = this.arr.toString()
      if (this.arr.toString() === '所有煤矿') this.customerName = ''

    },
    deleteOne (str, arr) {
      let index = arr.indexOf(str)
      arr.splice(index, 1)
      return arr
    },
    // 煤矿企业数据初始化
    initCustomer () {
      if (this.searchData.customerName !== '') {
        this.arr = []
        this.arrTwo = []
        for (let i = 0; i < this.mineList.length; i++) {
          if (this.searchData.customerName.indexOf(this.mineList[i].label) !== -1) {
            this.arr.push(this.mineList[i].label)
            this.arrTwo.push(this.mineList[i].id)
            this.$set(this.mineList[i], 'checked', true)
          } else {
            this.$set(this.mineList[i], 'checked', false)
          }
        }
        this.$set(this, 'customerCode', this.arrTwo.toString())
        this.$set(this, 'customerName', this.arr.toString())
        this.radioValue = this.searchData.customerName
      } else {
        this.arr = []
        this.arrTwo = []
        for (let i = 0; i < this.mineList.length; i++) {
          this.$set(this.mineList[i], 'disabled', false)
          this.$set(this.mineList[i], 'checked', false)
        }
        this.$set(this, 'customerCode', '')
        this.$set(this, 'customerName', '')
        this.radioValue = ''
      }
    },
    // 煤矿企业数据取消
    cancelCustomer () {
      // this.initCustomer()
      this.mineShow = false
      // this.filterCustomerVal = ''
    },
    // 煤矿企业数据确定
    clickCustomer (index) {

      if (this.radioValue) {
        if (this.isQuert) {
          this.searchData.pageNumber = 1
        }
        this.$set(this.searchData, 'customerNo', this.customerCode)
        this.$set(this.searchData, 'customerCode', this.customerCode)
        this.$set(this.searchData, 'customerName', this.customerName)
        this.filterCustomerVal = ''
        this.mineShow = false
        this.searchData.customerStr = this.customerName
        this.$emit('searchList', this.searchData)
      } else {
        this.$refs.uToast.show({
          title: '请选择企业',
          type: 'warning',
        })
      }

    },
    // mineConfirm(index){
    //   this.searchData.customerStr = this.mineList[index].label
    //   if (this.mineList[index].label == '所有煤矿') {
    //     this.searchData.customerName = ''
    //   } else {
    //     this.searchData.customerName = this.searchData.customerStr
    //   }
    //   this.searchData.customerNo = this.mineList[index].id
    //   this.searchData.customerCode = this.mineList[index].id
    //   this.$emit('searchList',this.searchData)
    // },
  }
}
</script>

<style lang="scss" scoped>
.mine-input {

  .uni-input-placeholder {
    left: 22rpx;
  }
}

.county-input {
  max-width: 200rpx;
}

.popup-content {
  // 弹出层样式
  padding: 24rpx;
  text-align: center;

  .checkbox {
    &-item {
      height: 100rpx;
    }

    /deep/.u-checkbox-group {
      display: inline;

      .u-checkbox {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;

        .u-checkbox__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }

    /deep/.u-radio-group {
      display: inline;

      .u-radio {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        height: 90rpx;

        .u-radio__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
  }

  /deep/ .u-radio__label {
    text-align: left;
    flex: 1;
  }
}
</style>